<template>
  <div id="role-form">
    <el-form ref="form" class="infoForm" label-width="90px">
      <el-form-item :required="true" label="角色名称:">
        <el-input size="mini" style="width: 50%" v-model.trim="role_name" placeholder="请输入角色名称"></el-input>
      </el-form-item>
      <el-form-item :required="true" label="权限分配:">
        <div class="power">
          <!-- style="border-right: 1px #ccc dashed" -->
          <div class="authority-wrap">
            <div class="authority-title">PC权限菜单</div>
            <el-tree accordion :data="treeData" show-checkbox node-key="id" ref="tree" :props="defaultProps"> </el-tree>
          </div>
          <!-- <div class="authority-wrap app-wrap">
            <div class="authority-title" style="padding-left: 30px">
              APP权限菜单
            </div>
            <el-tree
              :data="apptreeData"
              show-checkbox
              node-key="id"
              ref="apptree"
              highlight-current
              :props="defaultProps"
            ></el-tree>
          </div> -->
        </div>
      </el-form-item>
      <el-form-item label="角色描述:">
        <el-input size="mini" style="width: 100%" v-model.trim="describe" placeholder="请输入描述信息"></el-input>
      </el-form-item>
    </el-form>
    <div style="width: 100%; text-align: center">
      <el-button size="small" class="exportBtn" @click="closeDialog"> 取消 </el-button>
      <el-button v-if="title === '添加角色'" size="small" class="exportBtn qd" @click="saveRole"> 确定 </el-button>
      <el-button size="small" class="exportBtn xg" v-else @click="saveRole"> 修改 </el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    roleTitle: {
      type: String,
      default: ''
    },
    roleId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      apptreeData: [],
      treeData: [],
      title: this.roleTitle,
      role_id: this.roleId,
      role_name: '',
      describe: '',
      defaultProps: {
        children: 'highestRoleMenuVos',
        label: 'title'
      }
    }
  },
  mounted() {
    if (this.title === '添加角色') {
      this.getAddRoleList()
    } else {
      this.getPowerList()
    }
  },
  methods: {
    // 添加角色权限菜单
    getAddRoleList() {
      this.$https({
        method: 'get',
        url: '/api/getAllMenu',
        data: {}
      })
        .then(res => {
          if (res.code == 0) {
            // let treelist = [];
            this.treeData = res.data
            // let arr = res.data;
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 关闭对话框
    closeDialog() {
      this.$emit('close')
      this.role_id = null
    },
    save() {
      this.$emit('save')
      this.role_id = null
    },
    // 获取角色权限菜单
    getPowerList() {
      this.$https({
        method: 'get',
        url: '/api/rolePowerList/?id=' + this.role_id,
        data: {}
      })
        .then(res => {
          if (res.code === 0) {
            let treelist = []
            this.describe = res.data.details
            this.role_name = res.data.roleName
            this.treeData = res.data.sysMenus
            let arr = res.data.sysMenus
            treelist = this.getCheck(arr, treelist)
            this.$nextTick(() => {
              this.$refs.tree.setCheckedNodes(treelist)
            })
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    getCheck(val, arr) {
      val.forEach(item => {
        if (Array.isArray(item.highestRoleMenuVos) && item.highestRoleMenuVos.length > 0) {
          this.getCheck(item.highestRoleMenuVos, arr)
        } else {
          if (item.isHave === 1) {
            arr.push({
              id: item.id,
              label: item.title
            })
          }
        }
      })
      return arr
    },
    // 添加保存
    saveRole() {
      let menuList = []
      let checkeList = this.$refs.tree.getCheckedNodes(false, true)
      if (checkeList.length === 0) {
        this.$message.error('请至少添加一个权限')
      } else if (this.role_name === '') {
        this.$message.error('请输入角色名称')
      } else {
        for (var i = 0; i < checkeList.length; i++) {
          menuList.push(checkeList[i].id)
        }
        this.$https({
          method: 'post',
          url: '/api/saveRole',
          data: {
            details: this.describe,
            id: this.role_id,
            menuIds: menuList,
            roleName: this.role_name
          }
        })
          .then(res => {
            if (res.code === 0) {
              this.save()
              this.$message.success(res.msg)
            } else {
              this.$message.error(res.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      }
    }
  }
  // watch: {
  //   role_id() {
  //     // return (this.role_id = this.roleId);
  //     console.log(this.role_id);
  //   },
  // },
}
</script>
<style lang="less" scoped>
.el-tree {
  // display: flex;
  // justify-content: center;
  // align-items: center;
  // flex-direction: column;
  padding-left: 30px;
}

.power {
  border: 1px solid #d6d6d6;
  border-radius: 5px;
  display: flex;
  .authority-wrap {
    // display: flex;
    // justify-content: center;
    // flex-direction: column;
    // align-items: center;
    width: 100%;
  }
  .app-wrap {
    .el-tree {
      padding-left: 30px;
    }
  }
  .authority-title {
    text-align: center;
    // padding-left: 30px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
  }
}
.exportBtn {
  width: 130px;
}
.xg,
.qd {
  margin-left: 20px;
  color: #fff !important;
  background-color: #fa7355;
  border: 1px solid #fa7355 !important;
  padding: 9px 8px !important;
  &:hover {
    color: #fa7355 !important;
    background-color: transparent !important;
  }
}
.xz {
  width: 60px;
}
.add {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 114px;
}
</style>
